import React, {Component} from 'react';
import {StyleSheet} from 'react-native';
import {
  Button,
  Dialog,
  Text,
  View,
  RadioButton,
  RadioGroup,
  Checkbox
} from 'react-native-ui-lib';
import {isIPhoneX} from '../../../configs/platform';
import {commonStyles} from '../../../configs/commonStyle';

export default class RecordSurveyDialog extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
      data: {},
      showHeader: true,
      isDance: 1,
      services: [{
        checked: false,
        text: '大转盘',
      },{
        checked: false,
        text: '泡泡机',
      },{
        checked: false,
        text: '幸运签',
      },{
        checked: false,
        text: '刮刮乐',
      },{
        checked: false,
        text: '拍立得',
      },{
        checked: false,
        text: '骰子',
      },{
        checked: true,
        text: '无',
      },],
      errorTips: ''
    };
  }

  show = () => {
    this.setState({isOpen: true});
    this.resetState()
  };

  resetState = () => {
    this.state.errorTips = ''
    this.state.isDance = 1
    this.state.services.forEach(item => {
      item.checked = false
    })
  }

  dismiss = () => {
    this.setState({isOpen: false});
  };

  renderPannableHeader = props => {
    const {title} = props;
    return (
      <View>
        <View margin-10 center>
          <Text style={{...commonStyles.text_black_18}}>{title}</Text>
        </View>
        <View height={1} bg-line />
      </View>
    );
  };

  render() {
    const {isOpen, showHeader, title} = this.state;
    const renderPannableHeader = showHeader
      ? this.renderPannableHeader
      : undefined;
    return (
      <Dialog
        migrate
        containerStyle={styles.roundedDialog}
        visible={isOpen}
        width={'70%'}
        onDismiss={this.dismiss}
        renderPannableHeader={renderPannableHeader}
        pannableHeaderProps={{title: '确定后停止录音'}}>
        <View>
          <View padding-10>
            <Text style={styles.content}>1.此次服务是否有跳舞</Text>
          </View>
          <RadioGroup
            style={styles.container}
            initialValue={this.state.isDance}
            onValueChange={value => {
              if (value == 0) {
                this.state.services.forEach(item => {
                  item.checked = item.text === '无'
                })
              }
              this.setState({isDance: value});
            }}>
            <RadioButton value={1} label={'是'} />
            <RadioButton value={0} label={'否'} />
          </RadioGroup>
        </View>

        <View>
          <View padding-10>
            <Text style={styles.content}>2.请选择服务</Text>
          </View>
          <View style={styles.checkboxs}>
            {
              this.state.services.map(item => {
                return <View style={{"height": 32, "width": 100}}>
                  <Checkbox value={item.checked} label={item.text} onValueChange={() => {
                    item.checked = !item.checked
                    if (item.checked) {
                      if (item.text === '无') {
                        this.state.services.forEach(item => {
                          item.checked = item.text === '无'
                        })
                      } else {
                        this.state.services.forEach(item => {
                          if (item.text === '无') {
                            item.checked = false
                          }
                        })
                      }
                    }
                    this.setState({'services': this.state.services})
                  }}/>
                </View>
              })
            }
          </View>
        </View>

        <View padding-10>
          {
            IsNullOrEmpty(this.state.errorTips)?null:
            <Text style={commonStyles.text_red_12}>{this.state.errorTips}</Text>
          }
        </View>
        <View row style={{borderTopColor: '#eeeeee', borderTopWidth: 1}}>
          <Button
            flex
            background-white
            labelStyle={{color: '#666666'}}
            text14
            label={'取消'}
            onPress={() => {
              this.dismiss();
              this.props.cancalClick && this.props.cancalClick();
            }}
          />

          <View style={{backgroundColor: '#eeeeee', width: 1}} />
          <Button
            flex
            label={'确定'}
            background-white
            labelStyle={{color: '#F9D63B'}}
            text14
            onPress={() => {
              if (this.state.services.every(item => !item.checked)) {
                this.setState({errorTips: '请选择服务'})
                return
              }
              this.dismiss();
              const data = {
                isDance: this.state.isDance,
                services: this.state.services.filter(item => item.checked)
              }
              this.props.callBack && this.props.callBack(data);
            }}
          />
        </View>
      </Dialog>
    );
  }
}

const styles = StyleSheet.create({
  roundedDialog: {
    backgroundColor: 'white',
    marginBottom: isIPhoneX ? 0 : 20,
    borderRadius: 4,
  },
  content: {
    fontSize: 14,
    color: '#141414',
    lineHeight: 25,
    minHeight: 30,
    marginLeft: 10
  },
  container: {
    display: 'flex',
    alignItems: 'center',
    justifyContent:"space-around",
    flexDirection: 'row',
  },
  checkboxs: {
    display: 'flex',
    flexWrap: 'wrap',
    flexDirection: 'row',
    marginLeft: 20
  }
});
